<template>
  <div class="animated fadeIn">
    <div class="row">
      <div class="col-lg-12 col-md-12 col-sm-12">
        <b-card>
          <div slot="header">
            <strong>{{ newsName }}</strong>
          </div>
          <b-form-fieldset label="标题：">
            <input class="form-control" type="text" v-model="title" :disabled="isEdit"><br>
            <span v-show="isTitle" class="tip">标题不能为空</span>
          </b-form-fieldset>
          <b-form-fieldset label="类型：">
            <input class="form-control" type="text" v-model="type" :disabled="isEdit"><br>
            <span v-show="isType" class="tip">类型不能为空</span>
          </b-form-fieldset>
          <b-form-fieldset label="内容：">
            <div class="news-content" :disabled="isEdit">
              <rich-editor :initial="initial" @content-change="handleChange"></rich-editor>
            </div><br>
            <span v-show="isContent" class="tip">内容不能为空</span>
          </b-form-fieldset>
          <b-form-fieldset label="创建时间：" v-show="isShowTime">
            <input class="form-control" type="text" v-model="createTime" :disabled="true">
          </b-form-fieldset>
          <b-form-fieldset label="更新时间：" v-show="isShowTime">
            <input class="form-control" type="text" v-model="updateTime" :disabled="true">
          </b-form-fieldset>
          <b-form-fieldset label="更新人："  v-show="isShowTime">
            <input class="form-control" type="text" v-model="updateUser" :disabled="true">
          </b-form-fieldset>
          <div slot="footer">
            <b-button type="submit" size="sm" variant="primary" @click="submitInfo()" v-show="isSubmint"><i class="fa fa-dot-circle-o"></i> 提交 </b-button>
            <b-button type="submit" size="sm" variant="primary" @click="btnBack()" v-show="isBack"><i class="fa fa-dot-circle-o"></i> 返回 </b-button>
          </div>
        </b-card>
      </div>
    </div>
  </div>
</template>
<script>
  import {formatDate} from '../service/date'
  import { addNews, findNewsById, updateNews } from '../service/api'
  import RichEditor from '../components/RichEditor.vue'
  export default {
    name: 'forms',
    components: {
      RichEditor
    },
    data () {
      return {
        initial: '...',
        content: '',
        options: {},
        newsName: '',
        title: '',
        time: '',
        type: '',
        createTime: '',
        updateTime: '',
        updateUser: '',
        isTitle: false,
        isType: false,
        isContent: false,
        isEdit: false,
        isSubmint: false,
        isBack: false,
        isShowTime: false
      }
    },
    methods: {
      btnBack () {
        this.$router.push({
          path: '/news/news_list'
        })
      },
      handleChange (content) {
        this.content = content
      },
      submitInfo2 () {
        console.log('title: ' + this.title)
        console.log('type: ' + this.type)
        console.log('content: ' + this.content)
      },
      async submitInfo () {
        if (this.$route.query.flag === '1') {
          const form = {id: this.$route.query.id, title: this.title, type: this.type, content: this.content, user: localStorage.getItem('username')}
          const fd = new FormData()
          for (const k in form) {
            fd.append(k, form[k])
          }
          updateNews({ fd })
            .then(({ data, err }) => {
              console.log('err: ' + err)
              console.log('data: ' + data)
              if (data.code === 200) {
                alert('更新成功！')
                this.$router.push({
                  path: '/news/news_list'
                })
              }
            })
        }
        if (this.$route.query.flag === '2') {
          if (this.title === '') {
            this.isTitle = true
          } else if (this.isType === '') {
            this.isType = true
          } else if (this.isContent === '') {
            this.isContent = true
          } else {
            addNews({title: this.title, type: this.type, content: this.content, user: localStorage.getItem('username')})
              .then(({ data, err }) => {
                console.log('err: ' + err)
                console.log('data: ' + data)
                if (data.code === 200) {
                  alert('提交成功!')
                  // 页面刷新
                  // location.reload()
                  this.$router.push('/news/news_list')
                }
              })
          }
        }
      }
    },
    computed: {
      editor () {
        return this.$refs.editor.quill
      }
    },
    mounted () {
      // x
    },
    created () {
      // fetch
      if (this.$route.query.id) {
        findNewsById({id: this.$route.query.id})
          .then(({ data, err }) => {
            console.log('err: ' + err)
            console.log('data: ' + data)
            if (data.code === 200) {
              this.title = data.result.title
              this.type = data.result.type
              this.initial = data.result.content
              this.createTime = data.result.createtime
              if (data.result.updatetime !== null) {
                this.updateTime = formatDate(new Date(data.result.updatetime.time), 'yyyy-MM-dd hh:mm:ss')
              }
              this.updateUser = data.result.updateUser
            }
          })
      }
      if (this.$route.query.flag === '3') {
        this.newsName = '内容详情'
        this.isSubmint = false
        this.isBack = true
        this.isShowTime = true
      } else {
        this.isSubmint = true
        this.isBack = false
      }
      if (this.$route.query.flag === '1') {
        this.newsName = '内容编辑'
        this.isShowTime = false
      }
      if (this.$route.query.flag === '2') {
        this.newsName = '内容添加'
        this.updateUser = localStorage.getItem('username')
        this.isShowTime = false
      }
    }
  }
</script>
<style>
  .news-content{
    min-height: 200px;
  }
  .ql-editor{
    height: 300px!important;
    overflow-y: scroll;
  }
  .tip{
    color: #f20000;
  }
</style>
